<template>
  <div class="publish">
   <div class="head">
     发布文章
   </div>
    <form enctype="multipart/form-data" action="http://192.168.3.4:3001/uploadImg" method="post">
      <div class="title">
        <div class="title-text">标题</div>
        <div class="title-input">
          <input id="title" name="title" type="text" placeholder="请输入文章标题">
        </div>
      </div>
      <div class="title">
        <div class="title-text">作者</div>
        <div class="title-input">
          <input name="article_username" type="text" :value="author" readonly>
        </div>
      </div>
      <div class="title">
        <div class="title-text">分类</div>
        <div class="title-input">
          <select name="classify" id="classify">
            <option value="null">请选择分类</option>
            <option :value="item.classify_name" v-for="(item,index) in classifyData" :key="index">{{item.classify_name}}</option>
          </select>
        </div>
      </div>
      <div class="title">
        <div class="title-text">来源</div>
        <div class="title-input">
          <select name="source" id="source">
            <option value="null">请选择来源</option>
            <option value="原创">原创</option>
            <option value="转载">转载</option>
            <option value="其他">其他</option>
          </select>
        </div>
      </div>
      <div class="content">
        <div class="content-title">文章内容</div>
        <div class="content-message">
          <textarea id="content" name="content" placeholder="请输入文章内容"></textarea>
        </div>
      </div>
      <div class="picture">
        <div class="picture-text">文章封面</div>
        <div class="picture-input">
          <input name="imgUrl" id="file" type="file" class="form-control" @change="showImg">
        </div>
        <div class="picture-img">
          <img id="preview" src="" alt="">
        </div>
      </div>
      <div class="submit">
        <button type="button" @click="reset">重置</button>
        <button @click="action"  type="submit">提交</button>
      </div>
    </form>
  </div>
</template>
<script>
import qs from "qs";
export default {
  name: "Publish",
  data() {
    return {
      author: sessionStorage.getItem('username'),
      classifyData: '',
      }
  },
  methods: {
    showImg(){
      let fileDom = document.getElementById("file");
      let previewDom = document.getElementById("preview");
      let file = fileDom.files[0];
      // 使用FileReader来加载图像并显示图像的预览
      let fileReader = new FileReader();
      fileReader.onload = e=>{
        previewDom.src = e.target.result; //修改src
      };
      fileReader.readAsDataURL(file);        //显示预览
    },
    //提交
    action(e){
      let title = document.querySelector('#title').value;
      let classify = document.querySelector('#classify').value;
      let source = document.querySelector('#source').value;
      let content = document.querySelector('#content').value;
      let file = document.querySelector('#file').value;
      if (sessionStorage.getItem('username')){
        if (!title){
          alert('标题不能为空！！！');
          e.preventDefault();
        }else if(!this.isEmoji(title)){
          alert('标题不能含有表情！！！');
          e.preventDefault();
        } else if (classify === 'null'){
          alert('分类不能为空！！！');
          e.preventDefault();
        }else if (source === 'null'){
          alert('来源不能为空！！！');
          e.preventDefault();
        }else if (!this.isEmoji(content)){
          alert('内容不能含有表情！！！');
          e.preventDefault();
        }else if (!content){
          alert('内容不能为空！！！');
          e.preventDefault();
        }else if (!file){
          alert('封面不能为空！！！');
          e.preventDefault();
        }else {
          return true;
        }
      }
      else{
          alert('请先登录才能发布文章！！！');
          e.preventDefault();
        }
    },
    //获取文章分类
    getArticleClassify(){
      this.axios.get(`${process.env.VUE_APP_URL}/getArticleClassify`)
          .then((res)=>{
            this.classifyData = res.data;
          })
    },
    //判断字符串是否包含表情
    isEmoji(str){
      let reg = /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g;
      if(str.match(reg) === null){
        //console.log(str.match(reg))
        return true;
      }else{
        return false;
      }
    },
    //重置
    reset(){
        //清空标题
      document.querySelector('#title').value = '';
      document.querySelector('#classify').value = 'null';
      document.querySelector('#source').value = 'null';
      document.querySelector('#content').value = '';
      document.querySelector('#file').value = '';
      document.querySelector('#preview').src = '';
    }
  },
  created() {
    this.getArticleClassify();
  }
}
</script>
<style scoped>
  .head{
    text-align: center;
    width: 100%;
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 0.8rem;
    background-color: #EEEEEE;
  }
  .title{
    width: 100%;
    height: 2rem;
    border-bottom: 3px white solid;
  }
  .title div{
    display: inline-block;
    float: left;
  }
  .title-text{
    width: 20%;
    height: 2rem;
    line-height: 2rem;
    font-size: 0.7rem;
    text-align: center;
  }
  .title-input{
    width: 80%;
    height: 2rem;
  }
  .title-input input{
    display: block;
    width: 93%;
    height: 1.2rem;
    font-size: 0.45rem;
    line-height: 1.2rem;
    text-indent: 0.2rem;
    margin-top: 0.4rem;
    border: none;
    outline: none;
  }
  .title-input select{
    display: block;
    width: 93%;
    height: 1.2rem;
    font-size: 0.45rem;
    line-height: 1.2rem;
    text-indent: 0.2rem;
    margin-top: 0.4rem;
    border: none;
    outline: none;
    background-color: white;
  }
  .picture{
    display: inline-block;
    width: 100%;
    height: 10rem;
    margin-top: 0.5rem;
    border-bottom: 3px white solid;
    margin-bottm: 2rem;
  }
  .picture-text{
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.7rem;
    text-indent: 0.35rem;
  }
  .picture-input{
    width: 100%;
    height: 1.5rem;
  }
  .picture-input input{
    width: 60%;
    height: 1.5rem;
    line-height: 1.5rem;
    margin-left: 0.4rem;
    font-size: 0.5rem;
  }
  .picture-img{
    width: 96%;
    height: 7rem;
    margin-left: 2%;
    margin-top: 2px;
  }
  .picture-img img{
    width: 100%;
    height: 100%;
  }
  .content{
    display: inline-block;
    width: 100%;
    height: 5rem;

  }
  .content-title{
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    text-indent: 0.35rem;
    margin-top: 0.3rem;
    font-size: 0.7rem;
  }
  .content-message{
    width: 100%;
    height: 3.7rem;
  }
  .content-message textarea{
    width: 93%;
    height: 3.6rem;
    font-size: 0.5rem;
    border: 2px #666666 solid;
    margin-left: 3%;
    outline: none;
  }
  .submit{
    display: inline-block;
    width: 100%;
    height: 2rem;
    margin-bottom: 4rem;
  }
  .submit button{
    display: inline-block;
    width: 30%;
    height: 1rem;
    margin: 1rem auto 0 12%;
    font-size: 0.5rem;
    background-color: skyblue;
  }
  .submit button:first-child{
    background-color: yellowgreen;
  }
</style>
